<template>
  <!-- 请假列表 -->
  <div class="leavelist">
    <p style="color: rgba(16, 16, 16, 0.65);font-size: 13px;padding:14px;">已提交申请</p>
    <!-- 家长请假列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="到底了"
      @load="onLoad"
      :immediate-check="false"
      :error="error"
      v-if="roleType == 'parent'"
    >
      <div
        class="column-space-around list-item"
        v-for="(item,index) in list"
        :key="index"
        @click="LeaveDetail(item)"
      >
        <p class="row-space-between" style="margin:5px 0;align-items:center;">
          <span style="color: rgba(16, 16, 16, 1);">
            {{item.userName}}的请假
            <van-tag
              plain
              v-if="item.status == '已撤销'"
              color="#101010"
              style="margin-left:20px;"
            >{{item.status}}</van-tag>
            <van-tag
              plain
              v-if="item.status == '已生效'"
              color="#A2D9DD"
              style="margin-left:20px;"
            >{{item.status}}</van-tag>
          </span>
          <span style="color: rgba(16, 16, 16, 0.45);font-size: 12px;">{{item.operate_time}}</span>
        </p>
        <p style="color: rgba(16, 16, 16, 0.65);font-size: 13px;margin-top:5px;">校区：{{item.campusName}}</p>
        <p style="color: rgba(16, 16, 16, 0.65);font-size: 13px;">请假类型：{{item.types}}</p>
        <p style="color: rgba(16, 16, 16, 0.65);font-size: 13px;">开始时间：{{item.begin_time}}</p>
        <p style="color: rgba(16, 16, 16, 0.65);font-size: 13px;">开始时间：{{item.end_time}}</p>
      </div>
    </van-list>
    <!-- 职工请假列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="到底了"
      @load="onLoad"
      :immediate-check="false"
      :error="error"
      v-else
    >
      <div
        class="column-space-around list-item"
        v-for="(item,index) in list"
        :key="index"
        @click="LeaveDetail(item)"
      >
        <p class="row-space-between" style="margin:5px 0;align-items:center;">
          <span style="color: rgba(16, 16, 16, 1);">
            {{item.userName}}的请假
            <van-tag
              plain
              v-if="item.status == '审批中'"
              color="#4378BE"
              style="margin-left:20px;"
            >{{item.status}}</van-tag>
            <van-tag
              plain
              v-if="item.status == '审批通过'"
              color="#13B913"
              style="margin-left:20px;"
            >{{item.status}}</van-tag>
            <van-tag
              plain
              v-if="item.status == '审批不通过'"
              color="#F76060"
              style="margin-left:20px;"
            >{{item.status}}</van-tag>
            <van-tag
              plain
              v-if="item.status == '已撤销'"
              color="#101010"
              style="margin-left:20px;"
            >{{item.status}}</van-tag>
          </span>
          <span style="color: rgba(16, 16, 16, 0.45);font-size: 12px;">{{item.operate_time}}</span>
        </p>
        <p style="color: rgba(16, 16, 16, 0.65);font-size: 13px;;">请假类型：{{item.types}}</p>
        <p style="color: rgba(16, 16, 16, 0.65);font-size: 13px;;">开始时间：{{item.begin_time}}</p>
        <p style="color: rgba(16, 16, 16, 0.65);font-size: 13px;;">开始时间：{{item.end_time}}</p>
      </div>
    </van-list>
    <div style="height:50px;width:100%;background-color:#f7f7f7;"></div>
    <van-button
      class="my-btn"
      size="large"
      :color="roleType=='teacher'?'#6385D7':'#FF9900'"
      to="LeaveRequest"
      :text="roleType=='teacher'?'我要请假':'申请请假'"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { LeaveInfo } from "@/api/personal";
import { Toast } from "vant";
export default {
  data() {
    return {
      list: [],
      page: 1, //当前页码
      pageSize: 6, //一页显示的总数
      total: 0,
      lastPage: 0,
      loading: false,
      finished: false,
      error: false
    };
  },
  methods: {
    LeaveDetail(value) {
      this.$router.push({ name: "LeaveDetail", params: { code: value.code } });
    },
    // 加载更多数据
    async onLoad() {
      if (this.lastPage != 0 && this.page < this.lastPage) {
        this.page += 1;
        const result = await LeaveInfo("get", {
          cmd: "load_takeoff",
          phoneNumber: this.phone,
          role: this.roleType,
          page: this.page,
          size: this.pageSize
        });
        if (result.result == "OK") {
          this.list = this.list.concat(result.data);
          this.total = result.total;
          this.lastPage = result.lastpage;
        } else {
          this.error = true;
        }
      }
      // 加载状态结束
      this.loading = false;

      // 数据全部加载完成
      if (this.lastPage == this.page) {
        this.finished = true;
      }
    }
  },
  computed: {
    ...mapGetters({ roleType: "getRoleType", phone: "getPhone" })
  },
  async created() {
    Toast.loading({
      forbidClick: true,
      duration: 0
    });
    // 初始化数据
    const result = await LeaveInfo("get", {
      cmd: "load_takeoff",
      phoneNumber: this.phone,
      role: this.roleType,
      page: this.page,
      size: this.pageSize
    });
    if (result.result == "OK") {
      this.list = result.data;
      this.total = result.total;
      this.lastPage = result.lastpage;
    }
    Toast.clear();
  }
};
</script>

<style lang="scss" scoped>
.leavelist {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
}
.list-item {
  height: 91px;
  background-color: #fff;
  padding: 13px 19px;
  margin-top:8px;
}
p {
  margin: 0;
}
.my-btn {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>